<template>
	<view class="classification-page">
		<!-- 导航 -->
		<view class="bg">
			<c-navBar title="物流公司" isPerch isTran :isBack="true"></c-navBar>

			<!-- 搜索 -->
			<view class="search">
				<input type="text" confirm-type="search" v-model="apiParams.name" placeholder="搜索物流公司">
				<view class="se-btn" @click="searchGoods">搜索</view>
			</view>
		</view>
		<c-scroll-list :api="api" ref="list" :apiParams="apiParams" @load="(res) => (logisticsList = res)">
			<view class="content" v-for="item in logisticsList.list" :key="item.id">
				<view class="item">
					<view class="item_name">
						{{item.name}}
					</view>
					<view class="item_btn" @click="select(item)">
						选择
					</view>
				</view>
			</view>
		</c-scroll-list>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				logisticsList: {},
				api: this.$api.logisticsDropDown,
				apiParams: {
					name: '',
					pageSize: '15'
				}
			}
		},
		onLoad(option) {


		},
		onShow() {

		},
		watch: {
			apiParams: {
				handler(newVal, oldVal) {
					if (newVal.name == '') {
						this.$refs.list.refresh()
					}
				},
				deep: true
			}
		},
		methods: {

			// 搜索商品
			searchGoods() {
				this.$refs.list.refresh()
			},

			// 选择物流公司
			select(v) {
				uni.setStorageSync('logistics', JSON.stringify(v))
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.classification-page {
		height: 100vh;
		overflow: hidden;
	}

	.bg {
		width: 750rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}

	.top_nav {
		z-index: 10;
		color: #1A1A1A;
		font-size: 32rpx;
		font-weight: 700;
		top: 0;
		width: 100%;

		.nav {
			display: flex;
			align-items: center;
			justify-content: center;

			.tabbar-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #1A1A1A;
				line-height: 42rpx;
			}
		}
	}

	.search {
		width: 710rpx;
		height: 72rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 40rpx;
		margin-left: 28rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 1rpx solid #2AD03D;

		input {
			width: 100%;
			padding-left: 32rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 60rpx;
		}

		.se-btn {
			width: 120rpx;
			height: 64rpx;
			background: linear-gradient(135deg, #2AD03D 0%, #00B815 100%);
			margin-right: 6rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 62rpx;
			flex: none;
		}
	}

	.content {
		width: 750rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #e6e6e6;

			.item_btn {
				width: 100rpx;
				height: 48rpx;
				background: linear-gradient(135deg, #2AD03D 0%, #00B815 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}
</style>